<template>
  <div class="page_nav">
    <ul>
      <li
        :class="page_name == 'Personnel' ? 'active' : ''"
        @click="goPageByName('Personnel')"
      >
        人事管理
      </li>
      <li
        :class="page_name == 'Recruitment' ? 'active' : ''"
        @click="goPageByName('Recruitment')"
      >
        招聘管理
      </li>
      <li
        :class="page_name == 'Train' ? 'active' : ''"
        @click="goPageByName('Train')"
      >
        培训管理
      </li>
      <li
        :class="page_name == 'Property' ? 'active' : ''"
        @click="goPageByName('Property')"
      >
        资产管理
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page_name: this.$route.name,
    };
  },
  methods: {
    goPageByName(name) {
      if (this.page_name == name) return;
      this.$router.push({ name });
    },
  },
};
</script>

<style lang="scss" scoped>
.page_nav {
  width: 100%;
  ul {
    width: 100%;
    height: 40px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    background-color: #ddd;
    li {
      width: 100px;
      height: 100%;
      display: flex;
      cursor: pointer;
      justify-content: center;
      align-items: center;
      position: relative;
      &.active {
        color: #3285ff;
        &::after {
          content: "";
          width: 70px;
          height: 3px;
          background-color: #3285ff;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
}
</style>